<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>已取消订单</title>
  <link th:href="@{/css/bootstrap.css}" rel="stylesheet">
  <script th:src="@{/js/bootstrap.js}" rel="stylesheet"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f8f9fa;
    }

    .container {
      margin-top: 20px;
    }

    .page-header {
      margin-bottom: 20px;
    }

    .btn-primary {
      margin-bottom: 10px;
    }

    .form-inline {
      margin-top: 10px;
    }

    table {
      margin-top: 20px;
    }
  </style>
</head>
<body>

<div class="container" th:replace="userHome.html"/>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="page-header">
        <h1>订单列表 ———— 显示您所有已取消的订单</h1>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <a class="btn btn-primary" th:href="@{/allUserOrderCancel}">显示您所有已取消的订单</a>
    </div>
    <div class="col-md-8">
      <form class="form-inline" method="post" th:action="@{/selectUserOrderByIDCancel}">
        <div class="form-group">
          <input type="text" name="order_id" class="form-control" placeholder="请输入要查询订单的编号">
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-primary">查询</button>
        </div>
        <span th:if="${error}" class="text-danger" th:text="${error}"></span>
      </form>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <table class="table table-hover">
        <thead>
        <tr>
          <th>订单编号</th>
          <th>用户编号</th>
          <th>下单时间</th>
          <th>订单状态</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="order : ${list}">
          <td th:text="${order.order_id}"></td>
          <td th:text="${order.user_id}"></td>
          <td th:text="${order.order_date}"></td>
          <td th:text="${order.status}"></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
</body>
</html>